﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SQL Data Set</title>
    <link href="../Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css" media="print" />
    <script src="../Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    
    <style type="text/css">
        body{background:#2C2C2C; top:0px; left:0px; margin:0px;}
        .loggerContainer{margin-top:50px;background:#FFFFFF url('../Styles/ImagesIndustrialDashboard/background.png') repeat;height:auto; width:90%; padding:10px;}
        .loggersTables{position:relative;top:0;left:0;width:auto;height:auto}
        .cells{padding:5px;background-color:#FFFACD;}
    </style>
    
    <script type="text/javascript">
        var sqlDataSet;
    
        attachDomReadyEventHandler(function(){
            //Create SQLParameters Object
            var SQLParams = new SQLParameters();
            //Add SQLParameters(Name, SQLType, Value);
            SQLParams.add('CountryID', 'Int', 5);
            //Set Initial Options, using "CallProcedure" method, also set the procedure.
            var options = { 'URL': '../DALService.svc/CallProcedure'
                            ,'Procedure': 'dbo.getCitiesList'
                            ,'events':{'onComplete':logDBOData}
                        };
            sqlDataSet = new SQLDataSet(options);
            sqlDataSet.refreshData(SQLParams);
        });
        
        //Function what logs all dbo data of the first table.
        function logDBOData(){
            try{
                var logger = document.getElementById("logger");
                
                var tableJSON = document.createElement('table');
                tableJSON.className = 'loggersTables';
                tableJSON.cellSpacing = 0;
                tableJSON.border = 1;
                var tBodyJSON = document.createElement('tbody');
                tableJSON.appendChild(tBodyJSON);
                logger.appendChild(tableJSON);
                
                var dataTableJSON = sqlDataSet.getTableMatrixJSON('table');
                
                for(var iRow=0; iRow < dataTableJSON.length; iRow++){
                    var rowJSON = document.createElement('tr');
                    rowJSON.className = 'rows';
                    for(var iCol in dataTableJSON[iRow]){
                        var cellJSON = document.createElement('td');
                        cellJSON.innerHTML = dataTableJSON[iRow][iCol];
                        cellJSON.className = 'cells';
                        rowJSON.appendChild(cellJSON);
                    }
                    tBodyJSON.appendChild(rowJSON);
                }
            }
            catch(Error){window.status=Error.message;}
        }
    </script>
</head>
<body>
    <center>
        <div style="margin:0px;padding:0px;left:0px;top:0px;">
            <div class="loggerContainer">
                <center>
                    <div id="logger"></div>
                </center>
            </div>
        </div>
    </center>
</body>
</html>
